// Styles are provided for the following outputs:
//
// 1. Flash messages. Assumes the following HTML.
//    <div class="flash-block flash-#{key}">
//      <div>
//        Message (or list of messages)
//      </div>
//    </div>
//
//    The extra div is provided because some animation libraries
//    (i.e. Script.aculo.us) need it to do certain animations.
//
// 2. Pop-up error messages. Hidden by default. Needs JS to display.
//    Assumes the following HTML:
//    <span class="field-with-errors #{field-type}-with-errors">
//      #{HTML tag}
//      <span class="error-messages" style="display: none">
//        <span>#{message 1}</span>
//        <span>#{message 2}</span>
//        ...
//      </span>
//    </span>
//
// 3. Inline error messages. No JS needed.
//    <span class="field-with-errors #{type}-with-errors">
//      #{HTML tag}
//      <span class="inline-error-messages">
//        <span>#{message 1}</span>
//        <span>#{message 2}</span>
//        ...
//      </span>
//    </span>
//    The system also has the option of putting the error message
//    BEFORE the HTML tag.
//
//  4. General errors and warnings. Not generated by this library but
//     allows ad-hoc errors in the app. To use.
//     <div class="warning">Ad-hac warning</div>
//     <div class="error">Ad-hoc error</div>

.flash-block, .error-messages, .inline-error-messages, .warning, .error {
  padding: 0; font-size: 1.1em; margin: 1em 0
}
.flash-block {
  ul, li {list-style-type: none; margin: 0; padding: 0}
}

.flash-block div, .error-messages, .inline-error-messages, .warning, .error {
  color: black;
  padding: 1em 10px 1em 47px;
  border-width: medium;
  border-style: solid;
  background-color: #fdd9a3;
  border-color: #cc6502;
  background-image: image-url('flash-message.png');
  background-position: 10px 50%;
  background-repeat: no-repeat;
}

.flash-notice, .flash-success {
  div {
    background-color: #ACE18A;
    border-color: #2A954D;
    background-image: image-url('flash-notice.png');
  }
}

@mixin bad-styles {
  background-color: #F09185;
  border-color: #A30000;
  background-image: image-url('flash-warning.png');
}
.flash-warning, .flash-alert, .flash-error {
  div {@include bad-styles}
}
.error-messages, .inline-error-messages, .error {@include bad-styles}

@mixin field-highlight {background-color: #F09185}
.field-with-errors {
  position: relative;
  textarea, select {@include field-highlight}
  option {background-color: #FFF}
}
@each $type in checkbox, radio {
  .#{$type}-with-errors {@include field-highlight}
}
@each $type in text, email, url, password, number, file, tel {
  .#{$type}-with-errors {
    input {@include field-highlight}
  }
}

.error-messages {
  position: absolute;
  top: 1.5em; left: 0;
  margin: 0;
  min-width: 10em;
  z-index: 1000;
  display: block;
  span {display: block}
  .textarea-with-errors & {bottom: -3.5em; top: auto}
}

.inline-error-messages {margin: 0}
.inline-error-messages, .inline-error-messages span {
  display:inline-block;
  /* IE hack */
  zoom:1;
  *display:inline;
}
